<template>
  <div class="goods-details">
    <el-row class="details-content">
      <el-card shadow="always" style="height: 100%;" v-loading="loading">
        <!-- 图片展示 -->
        <el-col :span="10" class="details-content-img">
          <el-carousel trigger="click">
            <el-carousel-item v-for="item in srcList" :key="item">
              <el-image style="width: 100%; height: 100%" :src="item" :preview-src-list="srcList"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <!-- 商品信息 -->
        <el-col class="goods-details-info" :span="14">
          <h2 class="goods-title">{{ goodsDetails.goodsName }}</h2>
          <p
            class="goods-content"
          >&nbsp;&nbsp;&nbsp;&nbsp;{{ goodsDetails.goodDescription || "暂无" }}</p>
          <p class="goods-price">
            价格：
            <span>{{ goodsDetails.goodsPrice }}</span>RMB
          </p>
          <p class="goods-releaser">
            <span>发布者：{{ goodsDetails.createBy }}</span>
            <span>发布时间：{{ goodsDetails.createTime }}</span>
          </p>
          <div class="goods-button">
            <el-button
              v-if="!goodsIsCollected"
              type="primary"
              icon="el-icon-star-off"
              @click="handleCollect(1)"
            >收藏商品</el-button>
            <el-button
              class="cancelCollect"
              v-else
              type="primary"
              icon="el-icon-star-on"
              @click="handleCollect(0)"
            >取消收藏</el-button>
            <el-tooltip class="item" effect="dark" placement="top">
              <div slot="content">
                电话：{{ goodsSellerDetails.phonenumber }}
                <br />
                邮箱：{{ goodsSellerDetails.email }}
              </div>
              <el-button type="primary" icon="el-icon-mobile-phone" @click="appoint">线下交易预约</el-button>
            </el-tooltip>
          </div>
        </el-col>
      </el-card>
    </el-row>
    <el-row class="details-comment">
      <el-empty v-if="messageList.length==0" description="暂无评论，快来评论吧"></el-empty>
      <div class="comment-box" v-for="item in messageList" :key="item">
        <div class="first-row">
          <div class="name">
            <span class="create-by">{{ item.createBy }}</span> 评论
            <span class="sendee">{{ item.sendee }}</span>
            
          </div>
          <div class="time">{{ item.createTime }}</div>
        </div>
        <div class="second-row">
          <div class="content">{{ item.messageContent }}</div>
          <el-button type="text" class="operate" @click="handleAnswer(item.createBy)">回复</el-button>
        </div>
      </div>
    </el-row>
    <!-- 评论按钮 -->
    <div class="comment-button">
      <el-button
        type="primary"
        icon="el-icon-edit"
        circle
        class="button"
        @click="handleComment"
      ></el-button>
      <!-- 发布按钮 -->
      <el-button
        v-if="showCommentInput"
        type="primary"
        class="publish-button"
        @click="handlePublishComment"
      >发布</el-button>
      <el-input
        v-if="showCommentInput"
        type="textarea"
        :rows="1"
        :placeholder="answerUser?'回复'+answerUser:'请输入内容'"
        v-model="commentTextarea"
        class="input"
        clearable
      ></el-input>
    </div>
    <!-- 线下预约信息表 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="预约时间" prop="appointmentTime">
          <el-date-picker
            v-model="form.appointmentTime"
            type="datetime"
            placeholder="选择预约日期时间"
            default-time="12:00:00"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="预约地点" prop="appointmentSite">
          <el-input v-model="form.appointmentSite" placeholder="请输入预约地点" />
        </el-form-item>
        <el-form-item label="预约备注" prop>
          <el-input v-model="form.messageContent" type="textarea" placeholder="请输入预约内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addCollection, cancelCollection } from "@/api/mysystem/collection";
import { getGoodsDetails } from "@/api/mysystem/goods";
import { addMessage, listMessage } from "@/api/mysystem/message";

export default {
  name: "goodsDetails",
  data() {
    return {
      answerUser: "",
      messageList: [],
      showCommentInput: false,
      commentTextarea: "",
      rules: {
        appointmentTime: [
          { required: true, message: "请选择预约时间", trigger: "blur" }
        ],
        appointmentSite: [
          { required: true, message: "请输入预约地点", trigger: "blur" }
        ]
      },
      form: {
        appointmentTime: null,
        appointmentSite: null,
        messageContent: null,
        relatedGoodsId: null,
        createBy: null,
        createTime: null,
        sendee: null
      },
      open: false,
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      // srcList: [
      //   "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      //   "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
      // ],
      //收藏标识
      goodsIsCollected: false,
      //商品详情
      goodsDetails: null,
      //加载动画
      loading: false,
      //卖家信息
      goodsSellerDetails: {
        phonenumber: "暂无",
        email: ""
      }
    };
  },
  created() {
    console.log("goodsId>>>", this.$route.query.goodsId);
    this.getGoodsDetailsM(this.$store.state.user.id, this.$route.query.goodsId);
    this.getComment(this.$route.query.goodsId);
  },
  computed: {
    srcList() {
      let srcList = this.goodsDetails.picture.split(",");
      console.log("src>>>", srcList);
      srcList = srcList.map(item => {
        return "http://localhost:8080" + item;
      });
      console.log("src_after>>>", srcList);
      return srcList;
    }
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        this.form.relatedGoodsId = this.$route.query.goodsId;
        this.form.createBy = this.$store.state.user.name;
        // this.form.createTime = new Date();
        this.form.sendee = this.goodsDetails.createBy;
        this.form.type = 0;
        this.form.status = 0;
        this.form.appointmentStatus = 0;

        addMessage(this.form).then(response => {
          console.log(response, "<<<<<<");
          this.$modal.msgSuccess("预约成功");
          this.open = false;
          // this.getList();
        });
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    appoint() {
      this.open = true;
    },
    //通过 用户id 和 商品id 去查询商品详情、是否被收藏和卖家信息
    getGoodsDetailsM(userId, goodsId) {
      this.loading = true;
      getGoodsDetails(userId, goodsId).then(res => {
        console.log("details--->>>>>", res.data);
        this.goodsDetails = res.data.goodsDetails;
        this.goodsIsCollected = res.data.goodsIsCollected;
        this.goodsSellerDetails = res.data.goodsSellerDetails;
        this.$nextTick(() => {
          this.randerPreviewImg();
          this.loading = false;
        });
      });
    },
    //处理收藏按钮
    handleCollect(flag) {
      if (flag == 1) {
        addCollection({
          userId: this.$store.state.user.id,
          goodsId: this.$route.query.goodsId
        }).then(res => {
          // console.log("collect_res>>>", res);
          this.goodsIsCollected = true;
          this.$message({
            message: "收藏成功",
            type: "success",
            center: true
          });
        });
      } else {
        cancelCollection({
          userId: this.$store.state.user.id,
          goodsId: this.$route.query.goodsId
        }).then(res => {
          console.log("cancelCollect_res>>>", res);
          this.goodsIsCollected = false;
          this.$message({
            message: "已取消收藏",
            type: "success",
            center: true
          });
        });
      }
    },
    randerPreviewImg() {
      //获取预览图片按钮
      setTimeout(() => {
        let randerPreviewImgButtons = document.querySelectorAll(
          ".el-carousel__button"
        );
        console.log("btn>>>>>>>>>", randerPreviewImgButtons);
        randerPreviewImgButtons.forEach((item, index) => {
          item.style.backgroundImage = `url(${this.srcList[index]})`;
          console.log("index---->", index);
          console.log("this.srcList[index]---->", this.srcList[index]);
        });
      }, 0);
      //给它加上背景图片
    },
    // 处理发布评论
    handlePublishComment() {
      this.form = {};
      this.form.relatedGoodsId = this.$route.query.goodsId;
      this.form.createBy = this.$store.state.user.name;
      this.form.status = 0;
      this.form.type = 1;
      this.form.sendee = this.answerUser || this.goodsDetails.createBy;
      this.form.messageContent = this.commentTextarea;
      addMessage(this.form).then(response => {
        this.$modal.msgSuccess("发布成功");
        this.showCommentInput = false;
        this.getComment(this.$route.query.goodsId);
      });
    },
    // 获取该商品相关评论
    getComment(goodsId){
      this.form = {};
      this.form.relatedGoodsId = goodsId;
      listMessage(this.form).then((res)=>{
        console.log(res,"<<res");
        this.messageList = res.rows.filter((item)=>{
          return item.type == "1";
        });
      })
    },
    handleComment(){
      this.showCommentInput=!this.showCommentInput
      this.answerUser = "";
      this.commentTextarea = "";
    },
    // 处理回复评论
    handleAnswer(answerUser){
      this.answerUser = answerUser;
      this.commentTextarea = "";
      this.showCommentInput = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.goods-details {
  height: 96vh;
  width: 80vw;
  // background-color: #e07171;
  margin: 0 auto;
  position: relative;
  line-height: 2;
  .details-content {
    // background-color: #fff;
    height: 90%;
    position: relative;
    top: 5%;
    ::v-deep .el-card__body {
      height: 100%;
    }
    ::v-deep .details-content-img {
      // background-color: #5e4242;
      height: 100%;
      .el-carousel {
        height: 100%;
        .el-carousel__container {
          height: 76%;
        }
        .el-carousel__indicators {
          height: 22%;
          // background-color: #31689b;
          position: relative;
          top: 6px;
          display: flex;
          justify-content: space-between;
          overflow: auto;
          li {
            padding: 0;
            height: 100px;
            box-sizing: content-box;
          }
          .el-carousel__button {
            height: 100px;
            width: 100px;
            background-image: url();
            border-radius: 5px;
            background-size: cover;
          }
          .is-active {
            border: #d12424 3px solid;
            border-radius: 8px;
          }
        }
      }
      // .image-preview {
      //   display: flex;
      //   justify-content: space-evenly;
      //   margin: 10px 0;
      //   .smallImg {
      //     border-radius: 6px;
      //   }
      // }
      .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
      }

      .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
      }

      .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
      }
    }

    // 右边详细信息
    .goods-details-info {
      text-align: center;
      height: 100%;
      padding: 0 50px;
      position: relative;
      .goods-title {
        height: 10%;
        font-weight: 700;
        text-align: center;
      }
      .goods-content {
        // height: 40%;
        padding: 20px 40px;
        text-align: start;
        box-shadow: #afafaf 0px 0px 10px;
        border-radius: 6px;
      }
      .goods-price {
        span {
          color: #fc5421;
          font-size: 20px;
          font-weight: 700;
        }
      }
      .goods-releaser {
        text-align: start;
        display: flex;
        justify-content: space-between;
        position: absolute;
        width: 82%;
        bottom: 21%;
      }
      .goods-button {
        display: flex;
        justify-content: space-around;
        width: 80%;
        position: absolute;
        bottom: 15%;
        ::v-deep .cancelCollect {
          // color: rgb(197, 197, 53);
          background-color: #d9ff00;
          border-color: #d9ff00;
          color: #080808;
        }
      }
    }
  }
  .details-comment {
    width: 100%;
    // height: 200px;
    margin-top: 50px;
    border-radius: 3px;
    box-shadow: 0px 0px 10px rgba(128, 128, 128, 0.353);
    // background-color: #701d1d;
    padding: 20px 20px;
    .comment-box {
      // width: 100%;
      height: 60px;
      box-shadow: 0px 3px 20px rgba(201, 201, 201, 0.393);
      border-radius: 5px;
      margin-bottom: 10px;
      padding: 10px 10px;
      box-sizing: content-box;
      .first-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50%;
        width: 100%;
        .name {
          .create-by {
            color: rgb(60, 145, 236);
          }
          .sendee {
            color: rgb(60, 145, 236);
          }
        }
        .time {
          color: #969696;
        }
      }
      .second-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50%;
        width: 100%;
        .content {
          background-color: #ebeae976;
        }
        .operate {
          // color: rgb(0, 157, 255);
        }
      }
    }
  }
  .comment-button {
    position: fixed;
    bottom: 100px;
    right: 50px;
    z-index: 99;
    height: 60px;
    // width: 300px;
    display: flex;
    align-items: center;
    // position: relative;
    .button {
      position: absolute;
      right: 0;
    }
    .publish-button {
      // content: "发布";
        // width: 50px;
        // height: 25px;
        // background-color: #16afebab;
        transform: scale(0.8) translateX(20%);
        transform-origin: 100% 0;
        position: absolute;
        bottom: -30px;
        right: 0;
        // transform: translateX(-50%);
        border-radius: 5px;
        text-align: center;
        // line-height: 25px;
        
        // color: white;
        // cursor: pointer;
    }
    .input {
      position: absolute;
      right: 50px;
      width: 250px;
      transition: all 0.3s;
      // &::after {
      //   content: "发布";
      //   width: 45px;
      //   height: 25px;
      //   background-color: #16afebab;
      //   position: absolute;
      //   bottom: -30px;
      //   left: 50%;
      //   transform: translateX(-50%);
      //   border-radius: 5px;
      //   text-align: center;
      //   line-height: 25px;
      //   color: white;
      //   cursor: pointer;
      // }
    }
  }
}
</style>